<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小月文档转换器</title>
    <style>
        :root {
            --primary-color: #2563eb;
            --primary-hover: #1d4ed8;
            --bg-primary: #ffffff;
            --bg-secondary: #f8fafc;
            --bg-surface: #ffffff;
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --text-muted: #9ca3af;
            --border-color: #e5e7eb;
            --border-hover: #d1d5db;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --error-color: #ef4444;
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            --radius-sm: 0.375rem;
            --radius-md: 0.5rem;
            --radius-lg: 0.75rem;
            --transition: all 0.2s ease-in-out;
        }

        [data-theme="dark"] {
            --primary-color: #3b82f6;
            --primary-hover: #2563eb;
            --bg-primary: #1f2937;
            --bg-secondary: #111827;
            --bg-surface: #374151;
            --text-primary: #f9fafb;
            --text-secondary: #d1d5db;
            --text-muted: #9ca3af;
            --border-color: #374151;
            --border-hover: #4b5563;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --error-color: #ef4444;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            transition: var(--transition);
            overflow: hidden;
        }

        .app-container {
            display: flex;
            height: 100vh;
            background-color: var(--bg-primary);
        }

        /* 侧边栏样式 */
        .sidebar {
            width: 280px;
            background-color: var(--bg-secondary);
            border-right: 1px solid var(--border-color);
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            transition: var(--transition);
        }

        .sidebar-header {
            margin-bottom: 2rem;
        }

        .app-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .app-subtitle {
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        .config-section {
            margin-bottom: 2rem;
        }

        .section-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        select, input {
            width: 100%;
            padding: 0.5rem 0.75rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background-color: var(--bg-surface);
            color: var(--text-primary);
            font-size: 0.875rem;
            transition: var(--transition);
        }

        select:focus, input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .checkbox-group input {
            width: auto;
        }

        .checkbox-group label {
            margin-bottom: 0;
        }

        /* 主内容区域样式 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .header {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
            background-color: var(--bg-surface);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .theme-toggle {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 0.5rem;
            border-radius: var(--radius-md);
            transition: var(--transition);
        }

        .theme-toggle:hover {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
        }

        .content {
            flex: 1;
            padding: 2rem;
            overflow-y: auto;
        }

        /* 文件上传区域样式 */
        .upload-area {
            border: 2px dashed var(--border-color);
            border-radius: var(--radius-lg);
            padding: 3rem 2rem;
            text-align: center;
            background-color: var(--bg-secondary);
            transition: var(--transition);
            cursor: pointer;
        }

        .upload-area:hover {
            border-color: var(--primary-color);
            background-color: var(--bg-surface);
        }

        .upload-area.dragover {
            border-color: var(--primary-color);
            background-color: rgba(37, 99, 235, 0.05);
        }

        .upload-icon {
            font-size: 3rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
        }

        .upload-text {
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

        .upload-hint {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        /* 按钮样式 */
        .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--primary-hover);
        }

        .btn-secondary {
            background-color: var(--bg-surface);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }

        .btn-secondary:hover {
            background-color: var(--bg-secondary);
            border-color: var(--border-hover);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        /* 文件信息样式 */
        .file-info {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 1rem;
            margin-top: 1.5rem;
        }

        .file-info-header {
            display: flex;
            justify-content: between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .file-name {
            font-weight: 600;
            color: var(--text-primary);
        }

        .file-meta {
            display: flex;
            gap: 1rem;
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        /* 预览表格样式 - 优化版 */
        .preview-container {
            margin-top: 2rem;
            position: relative;
        }

        .preview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .preview-stats {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .table-container {
            border-radius: var(--radius-lg);
            overflow: auto; /* 允许水平和垂直滚动 */
            box-shadow: var(--shadow-md);
            background-color: var(--bg-surface);
            max-height: 400px;
            max-width: 100%;
        }

        .preview-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background-color: var(--bg-surface);
            font-size: 0.875rem;
        }

        .preview-table th {
            background-color: var(--primary-color);
            color: white;
            padding: 0.75rem;
            text-align: left;
            font-weight: 600;
            position: sticky;
            top: 0;
            z-index: 10;
            border-bottom: 2px solid var(--border-color);
            height: 48px; /* 固定表头高度 */
            min-width: 120px; /* 最小列宽 */
            max-width: 200px; /* 最大列宽 */
            white-space: nowrap; /* 防止文字换行 */
            overflow: hidden;
            text-overflow: ellipsis; /* 文字过长显示省略号 */
        }

        .preview-table th:first-child {
            border-top-left-radius: var(--radius-md);
        }

        .preview-table th:last-child {
            border-top-right-radius: var(--radius-md);
        }

        .preview-table td {
            padding: 0.75rem;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-primary);
            transition: var(--transition);
            min-width: 120px; /* 与表头列宽保持一致 */
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .preview-table tr:nth-child(even) {
            background-color: var(--bg-secondary);
        }

        .preview-table tr:hover {
            background-color: rgba(37, 99, 235, 0.05);
        }

        .preview-table tr:hover td {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .preview-table tr:last-child td {
            border-bottom: none;
        }

        .preview-table tr:last-child td:first-child {
            border-bottom-left-radius: var(--radius-md);
        }

        .preview-table tr:last-child td:last-child {
            border-bottom-right-radius: var(--radius-md);
        }

        /* 表格滚动条样式 */
        .table-container::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .table-container::-webkit-scrollbar-track {
            background: var(--bg-secondary);
            border-radius: 4px;
        }

        .table-container::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 4px;
        }

        .table-container::-webkit-scrollbar-thumb:hover {
            background: var(--border-hover);
        }

        /* 空状态样式 */
        .empty-preview {
            text-align: center;
            padding: 3rem;
            color: var(--text-muted);
            font-style: italic;
        }

        /* 进度指示器样式 */
        .progress-container {
            margin-top: 2rem;
            text-align: center;
        }

        .progress-ring {
            width: 60px;
            height: 60px;
            margin: 0 auto 1rem;
        }

        .progress-text {
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        /* 状态消息样式 */
        .status-message {
            padding: 1rem;
            border-radius: var(--radius-md);
            margin-top: 1rem;
            font-size: 0.875rem;
        }

        .status-success {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success-color);
            border: 1px solid rgba(16, 185, 129, 0.2);
        }

        .status-error {
            background-color: rgba(239, 68, 68, 0.1);
            color: var(--error-color);
            border: 1px solid rgba(239, 68, 68, 0.2);
        }

        .status-warning {
            background-color: rgba(245, 158, 11, 0.1);
            color: var(--warning-color);
            border: 1px solid rgba(245, 158, 11, 0.2);
        }

        /* 工具按钮组 */
        .toolbar {
            display: flex;
            gap: 0.5rem;
            margin-top: 1.5rem;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .app-container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid var(--border-color);
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏配置区域 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h1 class="app-title">小月文档转换器</h1>
                <p class="app-subtitle">ai写的文档转换工具</p>
            </div>

            <div class="config-section">
                <h3 class="section-title">转换设置</h3>
                
                <div class="form-group">
                    <label for="encoding">文件编码</label>
                    <select id="encoding">
                        <option value="UTF-8">UTF-8</option>
                        <option value="GBK">GBK</option>
                        <option value="GB2312">GB2312</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="delimiter">分隔符</label>
                    <select id="delimiter">
                        <option value=",">逗号 (,)</option>
                        <option value=";">分号 (;)</option>
                        <option value="\t">制表符 (Tab)</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="sheetName">工作表名称</label>
                    <input type="text" id="sheetName" value="Sheet1" placeholder="输入工作表名称">
                </div>

                <div class="form-group">
                    <div class="checkbox-group">
                        <input type="checkbox" id="hasHeader" checked>
                        <label for="hasHeader">包含表头行</label>
                    </div>
                </div>
            </div>

            <div class="config-section">
                <h3 class="section-title">主题设置</h3>
                <button class="btn btn-secondary" id="themeToggle">
                    <span>切换主题</span>
                </button>
            </div>
        </aside>

        <!-- 主内容区域 -->
        <main class="main-content">
            <header class="header">
                <h2>文件转换</h2>
                <button class="theme-toggle" id="headerThemeToggle">
                    <span>🌙</span>
                </button>
            </header>

            <div class="content">
                <!-- 文件上传区域 -->
                <div class="upload-area" id="uploadArea">
                    <div class="upload-icon">📁</div>
                    <p class="upload-text">拖拽CSV文件到此处，或点击选择文件</p>
                    <p class="upload-hint">支持.csv格式文件</p>
                    <input type="file" id="fileInput" accept=".csv" style="display: none;">
                </div>

                <!-- 文件信息显示 -->
                <div class="file-info" id="fileInfo" style="display: none;">
                    <div class="file-info-header">
                        <h3 class="file-name" id="fileName">文件名.csv</h3>
                    </div>
                    <div class="file-meta">
                        <span id="fileSize">0 KB</span>
                        <span id="fileType">CSV</span>
                    </div>
                </div>

                <!-- 预览表格 -->
                <div class="preview-container" id="previewContainer" style="display: none;">
                    <div class="preview-header">
                        <h3>数据预览</h3>
                        <div class="preview-stats" id="previewStats">
                            0 行 × 0 列
                        </div>
                    </div>
                    <div class="table-container">
                        <table class="preview-table" id="previewTable">
                            <thead>
                                <tr>
                                    <th>列1</th>
                                    <th>列2</th>
                                    <th>列3</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>示例数据</td>
                                    <td>示例数据</td>
                                    <td>示例数据</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 工具按钮 -->
                <div class="toolbar" id="toolbar" style="display: none;">
                    <button class="btn btn-primary" id="convertBtn">
                        <span>开始转换</span>
                    </button>
                    <button class="btn btn-secondary" id="clearBtn">
                        <span>清除文件</span>
                    </button>
                </div>

                <!-- 进度指示器 -->
                <div class="progress-container" id="progressContainer" style="display: none;">
                    <div class="progress-ring">🔄</div>
                    <p class="progress-text" id="progressText">转换中...</p>
                </div>

                <!-- 状态消息 -->
                <div class="status-message" id="statusMessage" style="display: none;"></div>
            </div>
        </main>
    </div>


    <script src="renderer.js"></script>
</body>
</html>